<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 事件委托：
        利用冒泡机制，当前的元素的需要操作的事件，让父级代替它执行

        e.target   目标元素
        this     绑定事件的元素
    
    -->
    <ul>
        <li>AAA</li>
        <li>BBB</li>
        <li>CCC</li>
    </ul>
    <button>单击创建li</button>

    <script>
        var btn = document.querySelector('button');
        var lis = document.querySelectorAll('ul>li');


        //  for(var i=0;i<lis.length;i++){
        //       lis[i].onclick=function(){
        //          console.log(this);
        //       }
        //  } 
        //  动态添加li   没有事件
        btn.onclick = function () {
            var li = document.createElement('li');
            li.innerHTML = '我是新增的li';
            document.querySelector('ul').appendChild(li)
        }


        //  动态添加li   也要有事件   事件委托
        document.body.onclick = function (e) {
            console.log(e.target, this);  //this 绑定事件的元素
            //  nodeType     nodeName  nodeValue
            console.log(e.target.nodeName);// LI

            if (e.target.nodeName == 'LI') {
                e.target.style.color = 'red';

            }

        }


    </script>

</body>

</html>